<template>
  <view class="">
    <view>
      <!-- 正文内容 -->
      <!-- 用户信息 -->
      <view class="userInfo">
        <image class="avator"
               :src="detail.customerType == 1 ? '../../static/clue/avator_company.png' : '../../static/clue/avator_personal.png'"
               mode="aspectFill"></image>
        <view class="userContent">
          <text class="contentText"
                style="font-size: 30rpx;font-weight: bold;">{{ detail.customerName|filterNull }}
          </text>
          <text class="contentText" v-if="detail.customerType == 1"
                style="font-size: 24rpx;">{{ detail.contactPerson|filterNull }}
          </text>
          <view style="display: flex;align-items: center;margin: 20rpx 0 0 20rpx;" @click="makecall">
            <text style="font-size: 24rpx;color: #fff;">{{ detail.contactMobile|filterNull }}</text>
            <image style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"
                   src="../../static/common/callPhone.png" mode="scaleToFill"></image>
          </view>

        </view>

        <image class="rightContent"
               :src="detail.customerType == 1 ? '../../static/common/company.png' : '../../static/common/personal.png'"
               mode="scaleToFill"></image>
      </view>

      <!-- 基础信息 -->
      <view class="item">

        <view
            style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;align-items: center;">
          <u-icon name="order" color="#1573FF" label="基本信息" label-color="#333333"
                  :customStyle="{'line-height': '80rpx',}">
          </u-icon>

          <text
              style="padding: 6rpx 15rpx;background-color: #2FC38D;border-radius: 8rpx;color: #fff;">
            {{ detail.orderStatusStr }}
          </text>

        </view>


        <u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

        <view class="text-line">
          <text class="text-name"> 身份证号:</text>
          <text class="text-value">{{ detail.idCardNo|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name"> 联系人:</text>
          <text class="text-value">{{ detail.contactPerson|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name"> 身份证失效日期:</text>
          <text class="text-value">{{ detail.idCardExpirydate|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">驾驶证号:</text>
          <text class="text-value">{{ detail.driverNo|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">驾驶证有效期:</text>
          <text class="text-value">{{ detail.driverValidity|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">准驾车型:</text>
          <text class="text-value">{{ detail.quasiDrivingType|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">紧急联系人:</text>
          <text class="text-value">{{ detail.emergencyPerson|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">紧急电话:</text>
          <text class="text-value">{{ detail.emergencyMobile|filterNull }}</text>
        </view>
        <view v-if="detail.customerType == 1">
          <view class="text-line">
            <text class="text-name">营业执照:</text>
            <text class="text-value">{{ detail.license|filterNull }}</text>
          </view>
          <view class="text-line">
            <text class="text-name">公司地址:</text>
            <text class="text-value">{{ detail.address|filterNull }}</text>
          </view>
        </view>

        <view v-if="detail.customerType == 0">
          <view class="text-line">
            <text class="text-name">性别:</text>
            <text class="text-value">{{ detail.sex|filterNull }}</text>
          </view>
          <view class="text-line">
            <text class="text-name">生日:</text>
            <text class="text-value">{{ detail.birthday|filterNull }}</text>
          </view>
          <view class="text-line">
            <text class="text-name">联系地址:</text>
            <text class="text-value">{{ detail.address|filterNull }}</text>
          </view>
          <view class="text-line">
            <text class="text-name">现在住址:</text>
            <text class="text-value">{{ detail.nowAddress|filterNull }}</text>
          </view>
        </view>


        <view class="text-line">
          <text class="text-name">邮箱:</text>
          <text class="text-value">{{ detail.email|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">所属业务员:</text>
          <text class="text-value">{{ detail.businessPersonName|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">所属渠道:</text>
          <text class="text-value">{{ detail.channelNme|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">是否签约司机:</text>
          <text class="text-value">{{ detail.signedDriver === '1' ? '是' : '否' | filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">入职日期:</text>
          <text class="text-value">{{ detail.joiningTime|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">开户行:</text>
          <text class="text-value">{{ detail.openingBank|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">银行账号:</text>
          <text class="text-value">{{ detail.bankAccount|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">所属银行:</text>
          <text class="text-value">{{ detail.affiliatedBank|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">备注:</text>
          <text class="text-value">{{ detail.note|filterNull }}</text>
        </view>

      </view>


      <!-- 附件资料 -->
      <view class="item">

        <view
            style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;align-items: center;">
          <u-icon name="order" color="#1573FF" label="附件资料" label-color="#333333"
                  :customStyle="{'line-height': '80rpx',}">
          </u-icon>

        </view>

        <u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

        <view class="pic-content">
          <view class="pic-item">
            <image :src="detail.idCardImg|mmvImageUrl" mode="scaleToFill">
            </image>
            <text>身份证正面</text>
          </view>
          <view class="pic-item">
            <image :src="detail.idCardImgBack|mmvImageUrl" mode="scaleToFill">
            </image>
            <text>身份证反面</text>
          </view>
        </view>

        <view class="pic-content">
          <view class="pic-item">
            <image :src="detail.driverImg|mmvImageUrl" mode="scaleToFill">
            </image>
            <text>行驶证正面</text>
          </view>
          <view class="pic-item">
            <image :src="detail.driverImgBack|mmvImageUrl" mode="scaleToFill">
            </image>
            <text>行驶证反面</text>
          </view>
        </view>

        <view class="pic-content" v-if="detail.customerType == 1">
          <view class="pic-item">
            <image :src="detail.licenseImg|mmvImageUrl" mode="scaleToFill">
            </image>
            <text>营业执照</text>
          </view>
        </view>

        <!--					<view class="pic-item">-->
        <!--						<image :src="detail.idCardImg|mmvImageUrl" mode="scaleToFill" @click="bigImg(detail.idCardImg)">-->
        <!--						</image>-->
        <!--						<text>{{detail.customerType == 1?'法人身份证':'客户身份证'}}</text>-->
        <!--					</view>-->

        <!--					<view class="pic-item">-->
        <!--						<image :src="(detail.customerType == 1?detail.licenseImg:detail.driverImg)|mmvImageUrl"-->
        <!--							mode="scaleToFill"-->
        <!--							@click="bigImg(detail.customerType == 1?detail.licenseImg:detail.driverImg)"></image>-->
        <!--						<text>{{detail.customerType == 1?'营业执照':'驾证正页'}}</text>-->
        <!--					</view>-->


        <!--				<view class="pic-content">-->

        <!--					<view class="pic-item">-->
        <!--						<image :src="detail.bankCardImg|mmvImageUrl" mode="scaleToFill"-->
        <!--							@click="bigImg(detail.bankCardImg)"></image>-->
        <!--						<text>银行卡</text>-->
        <!--					</view>-->
        <!--					<view class="pic-item" style="opacity: 0;">-->
        <!--					</view>-->
        <!--				</view>-->

        <picPdf :attachment="detail.attachment"></picPdf>

        <!-- <view v-if="this.detail.attachment.length>0">
          <text style="margin-left: 20rpx;font-size: 26rpx;color: #333;">附件</text>

          <view style="margin: 20rpx;">
            <u-album :urls="imglist" keyName="url"></u-album>
          </view>

          <view style="margin: 20rpx;display: flex;align-items: center;justify-content: space-between;"
            v-for="(pitem, pindex) in pdflist" :key="pindex" class="pdf-item">
            <text style="font-size: 26rpx;color: #333;">{{pitem.nameFile}}</text>
            <text style="color: #1573FF;font-size: 26rpx;" @click="viewpdf(pitem)">查看</text>
          </view>

        </view> -->

      </view>

      <!-- 业务信息 -->
      <view class="item">

        <view
            style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;align-items: center;">
          <u-icon name="order" color="#1573FF" label="业务信息" label-color="#333333"
                  :customStyle="{'line-height': '80rpx',}">
          </u-icon>

        </view>

        <u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

        <view class="bus_content">
          <view v-for="(bitem, bindex) in detail.customerManagementBusiness" :key="bindex">
            <view class="bus_item" :style="{
							'background-image':'url('+
								('1'==bitem.businessType?bg_images[0]:
								'2'==bitem.businessType?bg_images[1]:
								'3'==bitem.businessType?bg_images[2]:
								'4'==bitem.businessType?bg_images[2]:bg_images[3])+')'
							}" @click="busClick(bitem, bindex)">
              <text>{{ bitem.businessName }}</text>
              <text style="color: #333;font-weight: bold;">{{ bitem.businessCount }}</text>
            </view>
          </view>
        </view>


      </view>


    </view>
  </view>
</template>

<script>
import picPdf from '@/components/pic-pdf.vue';

export default {
  components: {
    picPdf
  },
  data() {
    return {
      customerType: 1,
      customerId: '',
      detail: {
        customerManagementBusiness: [],
        attachment: []
      },
      imglist: [],
      pdflist: [],
      bg_images: [
        this.baseImgUrl() + 'uni_longrent/icon_contract.png',
        this.baseImgUrl() + 'uni_longrent/icon_subscribers_car_order.png',
        this.baseImgUrl() + 'uni_longrent/icon_subscribers_bill.png',
        this.baseImgUrl() + 'uni_longrent/icon_subscribers_illegal.png',
      ],

    }
  },
  onLoad(op) {
    this.customerId = op.customerId;
    this.customerType = op.customerType;

    this.getData();
  },
  methods: {

    getData() {
      this.$u.api.getSignedClientDetails({
        customerType: this.customerType,
        customerId: this.customerId,
      }).then(res => {
        this.detail = res;

        //做假数据测试
        // this.detail.attachment = [
        // 	{
        // 		url:'ERBA/idCard_images/3c/9b/b0ac4a9bff3546beb65e3d7413123c9b.jpg',
        // 		typeFile:'1',
        // 		nameFile:'测试1'
        // 	},
        // 	{
        // 		url:'ERBA/license_images/62/fd/cc96cafd29d74aeb920240c1bf9062fd.jpg',
        // 		typeFile:'1',
        // 		nameFile:'测试2'
        // 	},
        // 	{
        // 		url:'http://139.9.242.179/image-server/uni_longrent/test.pdf',
        // 		typeFile:'0',
        // 		nameFile:'测试3'
        // 	},
        // 	{
        // 		url:'http://139.9.242.179/image-server/uni_longrent/test.pdf',
        // 		typeFile:'0',
        // 		nameFile:'测试4'
        // 	},
        // ]

      })
    },

    makecall() {
      if (!uni.$u.test.isEmpty(this.detail.contactMobile)) {
        uni.makePhoneCall({
          phoneNumber: this.detail.contactMobile
        })
      }
    },

    bigImg(url) {
      if (uni.$u.test.isEmpty(url)) {
        return
      }

      url = this.baseImgUrl() + url;
      uni.previewImage({
        urls: [url]
      })
    },

    busClick(item, index) {
      switch (item.businessType) {
        case 1:
          //合同信息
          uni.navigateTo({
            url: '/pagesB/contract/contract-list?customerId=' + this.customerId
          })
          break
        case 2:
          //车辆订单信息
          uni.navigateTo({
            url: '/pagesB/order/orderlist-member?customerId=' + this.customerId + '&type=member'
          })
          break
        case 3:
          //应收账单
          uni.navigateTo({
            url: '/pagesB/bill/bill-list?customerId=' + this.customerId + '&receiveType=1&businessType=1'
          })
          break
        case 4:
          //应退账单
          uni.navigateTo({
            url: '/pagesB/bill/billback-list?customerId=' + this.customerId + '&receiveType=1&businessType=1'
          })
          break
        case 5:
          //违章记录
          uni.navigateTo({
            url: '/pages/illegal/illegal_list_member?customerId=' + this.customerId
          })
          break
      }
    },


  }

}
</script>

<style lang="scss" scoped>
.userInfo {
  display: flex;
  width: 100%;
  // justify-content: space-between;
  // height: 180rpx;
  background-color: #1573FF;
  padding: 20rpx 0;

  // background: linear-gradient(45deg, #2464FF, #5765F9);
  .avator {
    margin-top: 30rpx;
    margin-left: 30rpx;
    width: 120rpx;
    height: 120rpx;
  }

  .userContent {
    margin-top: 10rpx;
    display: flex;
    flex: 1;
    margin-right: 30rpx;
    flex-direction: column;

    .contentText {
      color: $xz-textColor-FF;
      font-size: $xz-font-size-24;
      position: relative;
      left: 20rpx;
      margin-top: 20rpx;
    }
  }

}

.rightContent {
  margin-top: 26rpx;
  margin-right: 0rpx;
  width: 80rpx;
  height: 40rpx;
}

.pic-content {
  display: flex;
  margin: 10rpx 0;

  .pic-item {
    flex: 1;
    margin: 0 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      height: 200rpx;
      width: 100%;
    }

    text {
      margin-top: 20rpx;
      color: #333;
      font-size: 24rpx;
    }
  }
}

.bus_content {
  margin: 0 20rpx 0 0;
  display: flex;
  flex-wrap: wrap;

  .bus_item {
    width: 205rpx;
    margin: 0 0 20rpx 20rpx;
    height: 123rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20rpx;
    border-radius: 10rpx;
    box-sizing: border-box;
    background-size: 100% 100%;


    text {
      font-size: 24rpx;
      color: #a7a7a7;
    }
  }


}


</style>
